<template>
  <div class="app-wrapper" id="app-wrapper" :class="{ Mobile: isMobile }">
    <div class="main-container">
      <div class="sidebar-wrapper">
        <sidebar
          class="sidebar-container"
          :isMobile="isMobile"
          :detail="false"
          :lightHeight="4"
        ></sidebar>
      </div>
      <div
        class="main-layout"
        id="main-layout"
        :style="{
          left: isMobile ? '0' : '50px',
          padding: isMobile ? '1px' : '20px 40px 20px 20px',
          top: isMobile ? '50px' : '0',
          'overflow-y': isMobile ? 'scroll' : isScroll ? 'scroll' : '',
        }"
      >
        <div class="supply-chain">
          <header class="tab-header">
            <div class="title">&nbsp; &nbsp;采购进展</div>
          </header>
          <div class="sub-header" v-if="totalInfo.length">
            总采购包数：<span>{{totalInfo[0].COUNTNUM}}</span>&nbsp;&nbsp;已到场数：<span>{{totalInfo[1].COUNTNUM}}</span>
          </div>
          <!-- 供应链 采购执行监控 -->
          <div
            id="supply_chain_monitoring"
          >
            <el-table
              v-if="dataList.length && isShow"
              :data="dataList"
              header-cell-class-name="text-center supply_chain_monitoring_nowrap"
              :height="TableHeight"
            >
              <el-table-column prop="projectName" label="专业" min-width="140">
                <template slot-scope="pros">
                  <div class="cell-inner">
                    <div class="projectName" :title="pros.row.projectName">
                      {{ pros.row.name }}
                    </div>
                    <div class="present-status">
                      采购包数: &nbsp;{{ pros.row.count }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="提交请购单" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.preparePurchasePlan"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="定标" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.calibration"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="签订协议" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.agreementSigning"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="签订合同" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.contractSigning"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="FAT完成时间" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.fetoverDate"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="首批集港" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.firstArrivePort"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="末批集港" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.endArrivePort"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="首批到场" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.firstArriveScene"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
              <el-table-column label="末批到场" min-width="120">
                <template slot-scope="pros">
                  <supply-chain-monitoring-table-cell
                    :rows="pros.row.endArriveScene"
                  ></supply-chain-monitoring-table-cell>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Sidebar from '@/components/Sidebar.vue'
import { isMobile } from '@/utils/index'
import { getMajorAndPageTotalInfo, getPageTotalAndOverTotalInfo } from '@/api/api'
import SupplyChainMonitoringTableCell from './components/supply_chain_monitoring_table_cell.vue'
import { toast } from '@/common/toast'
export default {
  name: 'Purchase',
  components: {
    Sidebar,
    SupplyChainMonitoringTableCell
  },
  data () {
    return {
      isLoading: false,
      heightLight: 0,
      isMobile: false,
      isScroll: false,
      TableHeight: null,
      dataList: [],
      totalInfo: [],
      isShow: true
    }
  },
  watch: {
    TableHeight (val) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
      }, 100)
    }
  },
  methods: {
    // 根据项目id获取总采购包数、已到场数量
    getPageTotalAndOverTotalInfo: async function (projectId) {
      const response = await getPageTotalAndOverTotalInfo(projectId)
      if (response && response.statusCode === '200') {
        this.totalInfo = response.result
      }
    },

    // 根据项目id获取所有采购数据
    getMajorAndPageTotalInfo: async function (projectId) {
      const response = await getMajorAndPageTotalInfo(projectId)
      if (response && response.statusCode === '200') {
        this.dataList = response.result
      }
    }
  },
  created () {
    this.isMobile = isMobile()
    const projectId = this.$route.query.projectId
    if (!projectId) {
      return toast('无效项目')
    }
    this.getPageTotalAndOverTotalInfo(projectId)
    this.getMajorAndPageTotalInfo(projectId)
  },
  async mounted () {
    const TableHeight = $(window).height() - (this.isMobile ? 92 : 150)
    this.TableHeight = TableHeight
    this.$forceUpdate()
    $(window).resize((v) => {
      this.isMobile = isMobile()
      const TableHeight = $(window).height() - (this.isMobile ? 92 : 150)
      this.TableHeight = TableHeight
      this.$forceUpdate()
    })
  }
}
</script>
<style lang="scss" scoped>
.supply-chain {
  height: 100%;
  padding-top: 16px;
  .tab-header {
    height: 40px;
    width: 100%;
    margin-left: 20px;
    .title {
      margin-top: 13px;
      height: 14px;
      line-height: 14px;
      padding-left: 10px;
      border-left: 4px solid #008bf3;
      font-weight: 700;
      font-size: 17px;
      color: #fff;
      padding-left: 10px;
    }
  }
  .sub-header {
    height:40px;
    padding-top: 6px;
    color:#fff;
    font-weight: 700;
    font-size: 17px;
    padding-left: 10px;
    span {
       color:#fff;
    font-weight: 700;
    font-size: 17px;
    text-decoration: underline;
    }

  }
}
.title-loading {
  height: 20px;
  margin-top: 10px;
  width: 60%;
}
.loading-main {
  .tab-item {
    cursor: default;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 196px;
    font-weight: 700;
    font-size: 17px;
    .title {
      margin-left: 30px;
      margin-top: 11px;
      height: 18px;
      line-height: 18px;
      padding-left: 10px;
      border-left: none !important;
      font-weight: 700;
      font-size: 17px;
    }
  }
  .actived {
    // background: #ffffff;
  }
}
.cell-inner {
  padding-left: 10px;
  margin-right: 10px;
  height: 100%;
  .projectName {
    display: block;
    width: 100%;
    margin-top: 38px;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .present-status {
    margin-top: 6px;
    display: block;
    height: 20px;
    font-size: 14px;
    color: #fff;
  }
}
</style>
